<!--
 * @Description: 菜单组件
-->
<template>
  <div class="menu-component">
    <div class="menu-header">
      <h3>我的常用</h3>
      <el-button size="small" @click="toggleEdit">
        {{ editFlag ? '完成' : '编辑' }}
      </el-button>
    </div>
    
    <div class="my-menu-list">
      <div 
        v-for="item in displayMyMenuList" 
        :key="item.id"
        class="menu-item"
        @click="handleMenuClick(item)"
      >
        <div class="menu-icon">
          <img v-if="item.icon" :src="item.icon" :alt="item.name" />
          <div v-else class="default-icon">{{ item.name.charAt(0) }}</div>
        </div>
        <div class="menu-name">{{ item.name }}</div>
        <el-badge v-if="getMenuCount(item.id) > 0" :value="getMenuCount(item.id)" />
        
        <el-icon v-if="editFlag" class="remove-icon" @click.stop="removeFromMyMenu(item)">
          <Close />
        </el-icon>
      </div>
      
      <div v-if="editFlag" class="add-menu-item" @click="showAllMenus = true">
        <el-icon class="add-icon">
          <Plus />
        </el-icon>
        <div class="menu-name">添加</div>
      </div>
    </div>
    
    <div class="menu-groups">
      <div v-for="group in menuGroup" :key="group.groupId" class="menu-group">
        <div class="group-header" @click="toggleGroup(group.groupId)">
          <span class="group-name">{{ group.groupName }}</span>
          <el-icon class="expand-icon" :class="{ expanded: isGroupExpanded(group.groupId) }">
            <ArrowDown />
          </el-icon>
        </div>
        
        <div v-show="isGroupExpanded(group.groupId)" class="group-content">
          <div 
            v-for="item in group.menus" 
            :key="item.id"
            class="menu-item"
            @click="handleMenuClick(item)"
          >
            <div class="menu-icon">
              <img v-if="item.icon" :src="item.icon" :alt="item.name" />
              <div v-else class="default-icon">{{ item.name.charAt(0) }}</div>
            </div>
            <div class="menu-info">
              <div class="menu-name">{{ item.name }}</div>
              <div v-if="item.description" class="menu-desc">{{ item.description }}</div>
            </div>
            <el-badge v-if="getMenuCount(item.id) > 0" :value="getMenuCount(item.id)" />
            
            <el-icon v-if="item.memo" class="tip-icon" @click.stop="handleTipClick(item)">
              <QuestionFilled />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加菜单弹窗 -->
    <el-dialog v-model="showAllMenus" title="选择菜单" width="80%">
      <div class="all-menus">
        <div v-for="group in menuGroup" :key="group.groupId" class="menu-group">
          <div class="group-name">{{ group.groupName }}</div>
          <div class="group-menus">
            <div 
              v-for="item in group.menus" 
              :key="item.id"
              :class="['selectable-menu-item', { selected: isInMyMenu(item.id) }]"
              @click="toggleMyMenu(item)"
            >
              <div class="menu-icon">
                <img v-if="item.icon" :src="item.icon" :alt="item.name" />
                <div v-else class="default-icon">{{ item.name.charAt(0) }}</div>
              </div>
              <div class="menu-name">{{ item.name }}</div>
              <el-icon v-if="isInMyMenu(item.id)" class="check-icon">
                <Check />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showAllMenus = false">取消</el-button>
        <el-button type="primary" @click="saveMyMenu">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { ElButton, ElBadge, ElIcon, ElDialog } from 'element-plus'
import { Close, Plus, ArrowDown, QuestionFilled, Check } from '@element-plus/icons-vue'

interface Props {
  menuGroup: any[]
  myMenuList: any[]
  menuCountMap: { [key: string]: number }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  onSave: [any[]]
  onItem: [any]
  onTip: [any]
}>()

const editFlag = ref(false)
const showAllMenus = ref(false)
const editMyMenuList = ref<any[]>([])
const groupExpandMap = ref<{ [key: string]: boolean }>({})


const displayMyMenuList = computed(() => {
  return editFlag.value ? editMyMenuList.value : props.myMenuList
})

const toggleEdit = () => {
  editFlag.value = !editFlag.value
  if (editFlag.value) {
    editMyMenuList.value = [...props.myMenuList]
  }
}

const getMenuCount = (menuId: string) => {
  return props.menuCountMap[menuId] || 0
}

const isGroupExpanded = (groupId: string) => {
  return groupExpandMap.value[groupId] !== false // 默认展开
}

const toggleGroup = (groupId: string) => {
  groupExpandMap.value[groupId] = !isGroupExpanded(groupId)
}

const handleMenuClick = (item: any) => {
  if (!editFlag.value) {
    emit('onItem', item)
  }
}

const handleTipClick = (item: any) => {
  emit('onTip', item)
}

const removeFromMyMenu = (item: any) => {
  const index = editMyMenuList.value.findIndex(menu => menu.id === item.id)
  if (index > -1) {
    editMyMenuList.value.splice(index, 1)
  }
}

const isInMyMenu = (menuId: string) => {
  return editMyMenuList.value.some(menu => menu.id === menuId)
}

const toggleMyMenu = (item: any) => {
  if (isInMyMenu(item.id)) {
    removeFromMyMenu(item)
  } else {
    editMyMenuList.value.push(item)
  }
}

const saveMyMenu = () => {
  emit('onSave', editMyMenuList.value)
  showAllMenus.value = false
  editFlag.value = false
}
onMounted(()=>{
  
})
// 暴露给父组件的方法
defineExpose({
  setData: (data: any) => {
    // Object.assign(this, data)
  }
})
</script>

<style scoped lang="less">
.menu-component {
  background: #fff;
  border-radius: 12px;
  margin: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
  
  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
  }
}

.my-menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
  
  &:hover {
    background-color: #f5f7fa;
  }
  
  .menu-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
    
    .default-icon {
      width: 100%;
      height: 100%;
      background-color: #409eff;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-weight: bold;
    }
  }
  
  .menu-name {
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
  }
  
  .remove-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #f56c6c;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
  }
}

.add-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #409eff;
    color: #409eff;
  }
  
  .add-icon {
    font-size: 24px;
    margin-bottom: 8px;
  }
  
  .menu-name {
    font-size: 12px;
  }
}

.menu-groups {
  .menu-group {
    .group-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
      
      &:hover {
        background-color: #f9f9f9;
      }
      
      .group-name {
        font-weight: 500;
      }
      
      .expand-icon {
        transition: transform 0.3s ease;
        
        &.expanded {
          transform: rotate(180deg);
        }
      }
    }
    
    .group-content {
      .menu-item {
        flex-direction: row;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        
        .menu-icon {
          width: 32px;
          height: 32px;
          margin-bottom: 0;
          margin-right: 12px;
        }
        
        .menu-info {
          flex: 1;
          
          .menu-name {
            font-size: 14px;
            text-align: left;
            margin-bottom: 4px;
          }
          
          .menu-desc {
            font-size: 12px;
            color: #999;
          }
        }
        
        .tip-icon {
          margin-left: 8px;
          color: #999;
          
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
}

.all-menus {
  max-height: 400px;
  overflow-y: auto;
  
  .menu-group {
    margin-bottom: 20px;
    
    .group-name {
      font-weight: 500;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .group-menus {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 12px;
    }
  }
}

.selectable-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #409eff;
  }
  
  &.selected {
    border-color: #409eff;
    background-color: #f0f9ff;
  }
  
  .menu-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }
  
  .menu-name {
    font-size: 12px;
    text-align: center;
  }
  
  .check-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #409eff;
  }
}
</style>
